Mr笔记

Appearance

S05-03 Library-Lodash ​

[TOC]

概述 ​

前端工具库【 ​

jQuery：是一个快速、小型且功能丰富的 JS 库。它的设计宗旨是“Write Less, Do More”（写得更少，做得更多）。

你可以把它理解为 JS 的一个“工具箱”，它封装了大量常用的、但用原生 JS 写起来很复杂的功能（比如 DOM 操作、事件处理、动画、Ajax 等），提供了一个非常简单易用的 API。这使得开发者可以用更少的代码完成更多的工作，并且无需担心不同浏览器之间的兼容性问题。


Lodash：是一个广受欢迎的 JavaScript 实用工具库，它提供了大量高效、可靠且一致的函数，用于简化处理数组、数字、对象、字符串等常见编程任务。


Underscore：类似 Lodash，是一个 JavaScript 实用工具库，提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。


Moment：


Day.js：

image-20250929161337064

Lodash ​

Lodash：是一个广受欢迎的 JavaScript 实用工具库，它提供了大量高效、可靠且一致的函数，用于简化处理数组、数字、对象、字符串等常见编程任务。


对比 Underscore：

  1. Lodash是Underscore的一个分支：

    仍然遵循Underscore的API， 但在底层已完全重写过。对于字符串、数组、对象等Lodash 提供了跨环境迭代的支持。

  2. Lodash添加了许多Underscore没有的特性和功能：

    提供 AMD 支持、深度克隆、深度合并、更好的性能、大型数 组和对象迭代的优化等，如今的Lodash足以成为Underscore替代品。

基本使用 ​

安装 ​

  1. 方式一：CDN

    sh
    # jsdelivr
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js

# bootcdn
https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js
https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js

  2. 方式二：下载源码，本地引入

基本使用 ​

html
<script src="../libs/lodash.js"></script>

<script>
    // 数组分块
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); // [['a', 'b'], ['c', 'd']]

    // 深度克隆
    const objects = [{ 'a': 1 }, { 'b': 2 }];
    const deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]); // false

    // 防抖
    const debouncedFunc = _.debounce(() => {
      console.log('Debounced function executed');
    }, 1000);
    // 多次调用只会在最后一次调用后等待1000ms执行一次
</script>

常用方法 ​

数字 ​

  • _.random()：(lower?, upper?, floating?)，产生一个包括 lower 与 upper 之间的随机数。

    js
    _.random(0, 5);
// => an integer between 0 and 5
 
_.random(5);
// => also an integer between 0 and 5
 
_.random(5, true);
// => a floating-point number between 0 and 5
 
_.random(1.2, 5.2);
// => a floating-point number between 1.2 and 5.2

字符串 ​

  • _.camelCase()：(str?)，转换字符串为驼峰写法。

    js
    _.camelCase('Foo Bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'

  • _.capitalize()：(str?)，转换字符串首字母为大写，剩下为小写。

    js
    _.capitalize('FRED');
// => 'Fred'

  • _.endsWith()：(str?, target?, position?)，检查字符串str是否以给定的target字符串结尾。

    js
    _.endsWith('abc', 'c');
// => true
 
_.endsWith('abc', 'b');
// => false
 
_.endsWith('abc', 'b', 2);
// => true

  • _.padStart()：(str?, length?, chars?)，如果str字符串长度小于 length 则在左侧填充字符。 如果超出length长度则不做处理。

    js
    _.padStart('abc', 6);
// => '   abc'
 
_.padStart('abc', 6, '_-');
// => '_-_abc'
 
_.padStart('abc', 3);
// => 'abc'

数组 ​

  • _.uniq()：(arr)，创建一个去重后的数组副本，保留第一次出现的元素。

    js
    _.uniq([2, 1, 2]);
// => [2, 1]

  • _.flatten()：(arr)，减少一层arr嵌套深度。

    js
    _.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]

  • _.compact()：(arr)，返回过滤掉假值的新数组。

    js
    _.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

对象 ​

  • _.pick()：(obj, props?)，返回一个从 obj 中选中指定属性props的新对象（浅拷贝）。

    js
    var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

  • _.omit()：(obj, props?)，返回一个从obj中删除指定属性props后的新对象（浅拷贝）。

    js
    var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

  • _.clone()：(value)，创建一个 value 的浅拷贝。

    js
    var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

  • _.cloneDeep()：(value)，创建一个 value 的深拷贝。

    js
    var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

函数 ​

  • _.debounce()：(func, wait?, options?)，创建一个防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。

    js
    // 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
    js
    // 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
    js
    // 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
    js
    // 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

  • _.throttle()：(func, wait?, options?)，创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。

    js
    // 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
    js
    // 点击后就调用 `renewToken`，但5分钟内不超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
    js
    // 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

手写 Lodash ​

基本实现 ​

思路：Lodash 的工具函数基本都是类方法。

image-20250929151727639